<template>
  <div class="relax-page">
    <a-row :gutter="20">
      <a-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
        <a-card>
          <div class="bread-box">
            <!-- 面包屑导航 -->
            <a-breadcrumb>
              <a-breadcrumb-item
                ><router-link to="/home">首页</router-link></a-breadcrumb-item
              >
              <a-breadcrumb-item>生活</a-breadcrumb-item>
            </a-breadcrumb>
          </div>
          <div class="timeline-box">
            <a-timeline>
              <a-timeline-item color="green">
                <span>构思博客页面设计</span>
                <span class="time-item"> 2020-10-01</span>
              </a-timeline-item>
              <a-timeline-item color="green">
                <span>数据库表结构设计</span>
                <span class="time-item"> 2020-10-15</span>
              </a-timeline-item>
              <a-timeline-item color="red">
                <a-icon slot="dot" type="highlight" style="font-size: 20px" />
                <p>后端技术选型, 选择NestJS进行开发</p>
                <p>后台管理系统选用Vue, element-ui进行开发</p>
                <p>
                  后台管理系统测试<span class="time-item"> 2020-11-15</span>
                </p>
              </a-timeline-item>
              <a-timeline-item>
                <a-icon slot="dot" type="rise" style="font-size: 20px" />
                <p>
                  使用fullPage构建博客欢迎页<span class="time-item">
                    2020-12-01</span
                  >
                </p>
              </a-timeline-item>
              <a-timeline-item color="blue">
                <a-icon slot="dot" type="windows" style="font-size: 20px" />
                <p>使用Ant Design Vue进行博客主体页面的开发</p>
                <p>完成响应式布局 <span class="time-item"> 2020-12-15</span></p>
              </a-timeline-item>
              <a-timeline-item color="blue">
                <a-icon slot="dot" type="loading" style="font-size: 20px" />
                <p>
                  分模块进行完整功能开发<span class="time-item">
                    2020-12-15</span
                  >
                </p>
              </a-timeline-item>
              <a-timeline-item color="blue">
                <a-icon
                  slot="dot"
                  type="file-markdown"
                  style="font-size: 20px"
                />
                <p>
                  做空间交互模型科研, 博客记录进展<span class="time-item">
                    2021-01-15
                  </span>
                </p>
              </a-timeline-item>
              <a-timeline-item color="green">
                <a-icon slot="dot" type="edit" style="font-size: 20px" />
                <p>复习, 准备实习面试</p>
                <p>
                  顺便改造playGround模块, 打造资料室<span class="time-item">
                    2021-02-01</span
                  >
                </p>
              </a-timeline-item>
            </a-timeline>
          </div>
        </a-card>
      </a-col>
      <a-col :xs="0" :sm="0" :md="0" :lg="6" :xl="6">
        <!-- 计时区 -->
        <a-card class="time-count-box">
          <div class="time-count-title">
            <a-icon type="clock-circle" />
            <span style="font-weight: bold; margin-left: 5px">当前时间</span>
          </div>
          <div class="time-count-area">{{ dateFormat(date) }}</div>
        </a-card>
        <Author></Author>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import Author from "../Author/Author";
export default {
  data() {
    return {
      date: new Date(),
    };
  },
  components: {
    Author,
  },
  methods: {
    dateFormat(time) {
      var date = new Date(time);
      var year = date.getFullYear();
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      var month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var seconds =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      // 拼接
      return (
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds
      );
    },
  },
  mounted() {
    //计时
    //显示当前日期时间
    let _this = this; // 声明一个变量指向Vue实例this，保证作用域一致
    this.timer = setInterval(() => {
      _this.date = new Date(); // 修改数据date
    }, 1000);
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
    }
  },
};
</script>

<style lang="less" scoped>
.relax-page {
  padding: 63px 15px 0 15px;
  max-width: 1200px;
  margin: 0 auto;
}
.bread-box {
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}
.timeline-box {
  padding-top: 15px;
}
.time-item {
  font-weight: bold;
}
.time-count-area {
  margin-top: 10px;
  color: rgba(0, 0, 0, 0.85);
  font-size: 24px;
}
@media screen and (max-width: 768px) {
  .relax-page {
    padding: 0 15px;
  }
}
</style>

<style lang="less">
//定制时间轴
.ant-timeline-item-content {
}
</style>